<template>
  <div class="v-model-tree">
    <div class="_tree-header">
      <div class="_left-operate">
        <span title="展开" @click="expandAll">
          <img src="statics\icons\app\iconspread.svg" alt="">
        </span>
        <span title="收缩" @click="collapseAll">
          <img src="statics\icons\app\iconshrink.svg" alt="">
        </span>
        <span title="收藏">
          <img src="statics\icons\app\iconstar.svg" alt="">
        </span>
        <span title="搜索" @click="showSearch = !showSearch">
          <img src="statics\icons\app\iconsearch.svg" alt="">
        </span>
        
      </div>
      <div class="_right-operate">
        <a-dropdown :trigger="['click']" placement="bottomLeft">
          <span title="设置" class="_setting">
            <img src="statics\icons\app\iconproperty2.png" alt="">
            <a-icon type="down" style="font-size: 8px; color: rgba(0,0,0,.85); padding-top: 3px"/>
          </span>
          <a-menu slot="overlay" :trigger="['click']" class="_setting-menu">
            <a-menu-item key="0" @click="handleExtraFile">
              <div class="image-box">
                <a-checkbox :checked="showExtraFile"></a-checkbox>
              </div>
              显示扩展文件
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        
      </div>
      <!-- <a-button size="small" @click="handleBreakDisabled">break disable</a-button> -->
    </div>
    <div :class="{'_search-container': true, 'show-search': showSearch}">
      
      <a-select
        show-search
        placeholder="请输入图表名称"
        option-filter-prop="children"
        class="_search"
        size="small"
        @change="handleSelectChange"
        @search="handleSelectSearch"
      >
        <a-icon slot="suffixIcon" type="search"/>
        <a-select-option
          v-for="(item,index) in selectOptions"
          :key="index"
          :value="item.id"
          :title="item.label"
          :not-found-content="null"
          style="width:50%">
          {{item.label}}
          <div style="float: left; display:flex; height: 100%; align-items: center; margin-right: 5px; min-height: 22px"> 
            <img :src="item.icon" alt="" >
          </div>           
        </a-select-option>
      </a-select>
    </div>
    <m-tree :treeData="treeData" :showExtraFile="showExtraFile" class="_custom-tree" sortByName >
      <m-tree-node slot="default" slot-scope="{nodeData}" :graphNode="nodeData"/>
    </m-tree>
  </div>
</template>
<script>
import mxgraph from 'src/pages/mxgraph/graph/index';
import {
  sysml
} from 'src/api/sysml-imports';
import { treeForEach, getImgPath } from 'src/util/common';
//// import { title } from 'process';
import { graphHelper } from '@/api/GraphHelper';
import Tree from 'src/components/common/Tree/MTree';
import TreeNode from './TreeNode';
import { actions } from 'src/pages/mxgraph/Actions';

const { mxUtils } = mxgraph;

export default {
  name: 'comp-diagram-tree',
  components: {
    'm-tree-node': TreeNode,
    "m-tree": Tree
  },
  props: {
    visible: Boolean
  },
  data() {
    return {
      treeData: [{ label: '图表', value: '-1', id: '-1', displayTitle: "图表", iconPath: getImgPath("Package"), children: [], expand: true, isVirtual: true }],
      selectedKeys: [],
      expandedKeys: ['-1'],
      events: {
        //// 'model-add': this.freshTree,
        //// 'model-update': this.freshTree,
        //// 'model-delete': this.freshTree, //// model-delete 中判断删除的元素是不是graphs中的元素，是的话就移除此tab
        'project-switch': this.handleProjectChange
      },
      showSearch: false,
      showExtraFile: false,
      fakeNode: null,
      callback: null
    };
  },
  computed: {
    selectOptions(){
      return this.treeData[0].children.map(i => ({ label: i.title, id: i.id }));
    }

  },
  watch: {
    visible(bool){
      this.freshTree();

    }
  },
  mounted(){
    this.$bus.onBatch(this.events);
    this.freshTree();

  },
  beforeDestroy(){
    this.$bus.offBatch(this.events);

  },
  methods: {
    loadTreeData(){
      const diagramNodes = [];
      const allDi = graphHelper.getProjectAllDiagrams(app.activeProjectId) || new Map();
      //// treeUtil.getAllDiagrams().forEach(i => diagrams.push(i));
      //// console.log(diagrams);
      //// const diagramNodes = diagrams;

      allDi.forEach(value => {
        diagramNodes.push(value);
      });

      this.treeData[0].children = diagramNodes;

    },
    handleExtraFile() {
      this.showExtraFile = !this.showExtraFile;
    },

    expandAll() {
      treeForEach(this.treeData, i => {
        i.expand = true;
      });
    },

    collapseAll() {
      treeForEach(this.treeData, i => {
        i.expand = false;
      });
    },
    //// onExpand(expandedKeys, info) {
    ////   this.expandedKeys = expandedKeys;
    //// },
	  //// onContextMenu({ node, event }) {
    ////   const model = node.dataRef.model; //// 点击的节点的model
    ////   if ( node.dataRef.inEditTitle || node.dataRef.id === '-1') return;
    ////   this.onSelect(node.dataRef);
    ////   ContextMenu.popup({
    ////     x: event.clientX,
    ////     y: event.clientY,
    ////     menuItems: treeUtil.getMenuItems(model)
    ////   }).then(menuItem => {
    ////     this[menuItem.method] && this[menuItem.method](node.dataRef, menuItem);
    ////   }).catch(err => err && console.error(err));
    //// },
    //// onSelect(graphNode) {
    ////   if (this.selectedKeys[0] === graphNode.id) return;
    ////   this.selectedKeys = [graphNode.id];
    ////   treeUtil.selectTreeNode(graphNode);
    //// },
    //// dragStart(data){
    ////   treeUtil.setDragData(data);
    //// },
    //// dragEnd(){
    ////   treeUtil.setDragData(undefined);
    //// },
    //// openDiagram(data){
    ////   treeUtil.openDiagram(data.model);
    //// },
    //// onDoubleClick(data) {
    ////   treeUtil.openDiagram(data.model);
    //// },
    handleSelectSearch(query){
      this.selectQuery = query;
    },
    handleSelectChange(id){
      //// this.onSelect(value ? [value] : []);
      const graphNode = id && graphHelper.getGraphNodeById(id, app.activeProjectId);
      if (graphNode) {
        this.handleSelect(graphNode);
      }
    },
    handleSelect(graphNode){
      if (graphNode === app.selectedElement) return;
      actions.getAction('selectOnTree').run(graphNode);

    },
    //// showAttribute(data){
    ////   treeUtil.showAttribute();
    //// },
    //// renameNode(graphNode, menuItem) {
    ////   this.setNodeInEdit(graphNode);

    //// },
    //// deleteNode(node){
    ////   treeUtil.deleteNode(node);
    ////   if (node.value === this.selectedKeys[0]){
    ////     this.onSelect(null);
    ////   }
    //// },
    //// setNodeInEdit(graphNode){
    ////   const node = graphNode;
    ////   if (node){
    ////     this.$set(node, 'inEditTitle', true);
    ////     this.$set(node, 'titleForEdit', node.title);
    ////     //// node.inEditTitle = true;

    ////     this.$nextTick(() => {
    ////       const input = this.$refs.nameInput;
    ////       if (input){
    ////         input.focus();
    ////         input.select();
    ////       }
    ////     });
    ////   } else {
    ////     console.error('not found node', key);
    ////   }

    //// },

    freshTree(){
      if (this.visible === false) return;
      this.loadTreeData();

    },
    handleProjectChange({ id }){
      if (id){
        this.freshTree();
      }
    }

  }
};
</script>
<style lang="scss">
</style>
